import styled from '@emotion/styled';
import Head from 'next/head';
import { useEffect } from 'react';
import { gray125, gray750, standardGrey } from '../../next-res/colors';
import WordmarkImage from '../../next-res/components/svgs/Wordmark';
// Get track data as server-side props
export async function getServerSideProps(context: any) {
const { projectId } = context.params;
const landingUri = process.env.LANDING_URI || 'http://localhost:3000';
const serverUri = process.env.SERVER_URI || 'http://localhost:3001';
const appUri = process.env.APP_URI || 'http://localhost:3002';
// // Fetch data from external API
const result = await fetch(`${serverUri}/api/remixable/${projectId}`);
const data = await result.json();
if (!!data?.success === false) {
// Redirect to home page
return {
redirect: {
destination: landingUri + '?error=invalidremix',
permanent: false,
},
};
}
const redirectUrl = `${appUri}/project/${projectId}`;
// Pass data to the page via props
return {
props: {
project: data.project,
redirectUrl,
},
};
}
const Body = styled.div`
background-color: ${gray125};
color: ${gray750};
font-family: Architekt;
`;
const RemixRedirectWrapper = styled.div`
@keyframes cssAnimation {
100% {
opacity: 1;
}
}
animation: cssAnimation 1s 1s linear forwards;
opacity: 0;
padding: 40px;
box-sizing: border-box;
> * {
box-sizing: border-box;
}
color: ${gray750};
height: 100svh;
font-family: Architekt;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media screen and (max-height: 600px) {
padding: 10px;
}
`;
const RemixRedirectButton = styled.button`
background-color: transparent;
color: white;
border: none;
font-family: Architekt;
padding: 10px 20px;
font-size: 12px;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.2s;
&:hover {
background-color: ${standardGrey};
}
&:active {
background-color: ${standardGrey};
}
&:focus {
outline: none;
}
`;
const RemixProjectPage = ({ project, redirectUrl }: any) => {
useEffect(() => {
setTimeout(() => {
window.location.href = redirectUrl;
}, 0);
}, []);
const title = project.author ? `Edit "${project.name}" by ${project.author}` : `Edit "${project.name}"`;
return (
{title}
Remixing:
{project.name}
Click here if you are not redirected
);
};
export default RemixProjectPage;